<!DOCTYPE html>
<meta charset="UTF-8">
<div style="margin: 10px 0;">
	<a href="javascript:void(0)" data-type="linkbutton" onclick="edit()">编辑</a>
	<a href="javascript:void(0)" data-type="linkbutton" onclick="save()">保存</a>
	<a href="javascript:void(0)" data-type="linkbutton" onclick="cancel()">取消</a>
</div>
<table id="tg" data-type="gridtree" title="可编辑的列表树"
	data-define="
				iconCls: 'icon-ok',
				rownumbers: true,
				animate: true,
				collapsible: true,
				fitColumns: true,
				method:'get',url: '${rc.contextPath}/assets/ui/jww/demo/testdata/gridtree_data2.json',
				idField: 'id',
				treeField: 'name',
				showFooter: true
			">
	<thead>
		<tr>
			<th data-define="field:'name',width:180,editor:'inputbox'">任务名称</th>
			<th data-define="field:'persons',width:120,align:'right',editor:'numberbox'">人月</th>
			<th data-define="field:'begin',width:80,editor:'datebox'">开始日期</th>
			<th data-define="field:'end',width:80,editor:'datebox'">结束日期</th>
			<th data-define="field:'progress',width:120,formatter:formatProgress,editor:'numberbox'">进程</th>
		</tr>
	</thead>
</table>
<script type="text/javascript">
    function formatProgress(value) {
	    if (value) {
		    var s = '<div style="width:100%;border:1px solid #ccc">' + '<div style="width:' + value
		            + '%;background:#cc0000;color:#fff">' + value + '%' + '</div>'
		    '</div>';
		    return s;
	    } else {
		    return '';
	    }
    }
    var editingId;
    function edit() {
	    if (editingId != undefined) {
		    $('#tg').gridtree('select', editingId);
		    return;
	    }
	    var row = $('#tg').gridtree('getSelected');
	    if (row) {
		    editingId = row.id
		    $('#tg').gridtree('beginEdit', editingId);
	    }
    }
    function save() {
	    if (editingId != undefined) {
		    var t = $('#tg');
		    t.gridtree('endEdit', editingId);
		    editingId = undefined;
		    var persons = 0;
		    var rows = t.gridtree('getChildren');
		    for ( var i = 0; i < rows.length; i++) {
			    var p = parseInt(rows[i].persons);
			    if (!isNaN(p)) {
				    persons += p;
			    }
		    }
		    var frow = t.gridtree('getFooterRows')[0];
		    frow.persons = persons;
		    t.gridtree('reloadFooter');
	    }
    }
    function cancel() {
	    if (editingId != undefined) {
		    $('#tg').gridtree('cancelEdit', editingId);
		    editingId = undefined;
	    }
    }
</script>
